<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="cache-control" content="max-age=0"/>
    <meta http-equiv="cache-control" content="no-cache"/>
    <meta http-equiv="expires" content="0"/>
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT"/>
    <meta http-equiv="pragma" content="no-cache"/>
    <title>Icon kit preview | gulp-svg-sprites</title>
    <link href="css/sprite.css" rel="stylesheet" type="text/css" media="all"/>
    <style type="text/css">@CHARSET "UTF-8";
    * {
        box-sizing: border-box;
    }
    body {
        padding: 0;
        margin: 0;
        color: #666;
        background: #fafafa;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1em;
        line-height: 1.4
    }

    header {
        display: block;
        padding: 3em 3em 2em 3em;
        background-color: #fff
    }

    header p {
        margin: 0 0 0 0;
    }

    nav {
        font-size: .7em;
        display: block;
        width: 100%;
        margin: 0 0 2em 0
    }

    nav a {
        display: inline-block;
        text-decoration: none;
        margin-left: 2em;
        color: #0f7595;
        white-space: nowrap
    }

    nav a:hover {
        text-decoration: underline
    }

    nav a.current {
        font-weight: bold;
        text-decoration: underline;
        color: #666
    }

    section {
        border-top: 1px solid #eee;
        padding: 2em 3em 0 3em
    }

    ul {
        margin: 0;
        padding: 0
    }

    .icon-boxes li {
        display: inline-block;
        background-color: #fff;
        position: relative;
        margin: 0 2em 2em 0;
        vertical-align: top;
        border: 1px solid #ccc;
        padding: 1em 1em 1em 1em;
        cursor: default
    }

    .icon-box {
        margin: 0;
        width: 144px;
        height: 144px;
        position: relative;
        background: #ccc url() top left repeat;
        border: 1px solid #ccc;
        display: table-cell;
        vertical-align: middle;
        text-align: center
    }
    .icon-box.inverted {
        background: black;
    }

    .icon {
        display: inline;
        display: inline-block
    }

    .snippet-popover {
        position: absolute;
        display: none;
        opacity: 0;
        bottom: 0;
        left: 0;
        background: white;
        border: 1px solid #ccc;
        padding: 16px;
        z-index: 1;
        transition: all .3s;
    }
    .snippet-popover.active {
        display: block;
        opacity: 1;
    }

    pre {
        margin: 0;
        margin-bottom: 20px;
    }

    h2 {
        margin: 0;
        padding: 5px 0;
        font-size: 1em;
        font-weight: normal;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    h4 {
        margin: 0;
    }

    footer {
        display: block;
        margin: 0;
        padding: 0 3em 3em 3em
    }

    footer p {
        margin: 0;
        font-size: .7em
    }

    footer a {
        color: #0f7595;
        margin-left: 0
    }
    </style>

</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" style="position:absolute">
	
		<symbol id="icon-app-window-search-text" viewBox="0 0 60 60">
			<path d="M52.847 46.75a13.785 13.785 0 1 0-4.227 4.225.625.625 0 0 1 .777.088l6.335 6.335a2.5 2.5 0 0 0 3.535-3.535l-6.335-6.338a.625.625 0 0 1-.085-.775zm-3.405-4.392a8.668 8.668 0 1 1-16.22-6.115 8.668 8.668 0 0 1 16.22 6.112v.003zM27.5 22.5a1.875 1.875 0 0 0-1.875-1.875h-12.5a1.875 1.875 0 1 0 0 3.75h12.5A1.875 1.875 0 0 0 27.5 22.5zM13.125 29.377a1.875 1.875 0 0 0 0 3.75h6.25a1.875 1.875 0 1 0 0-3.75h-6.25z"></path><path d="M25 50.627a2.5 2.5 0 0 0-2.5-2.5h-15a2.5 2.5 0 0 1-2.5-2.5V15a.625.625 0 0 1 .625-.625h48.75A.624.624 0 0 1 55 15v6.875a2.5 2.5 0 0 0 5 0v-12.5a7.5 7.5 0 0 0-7.5-7.5h-45a7.5 7.5 0 0 0-7.5 7.5v36.25a7.5 7.5 0 0 0 7.5 7.5h15a2.5 2.5 0 0 0 2.5-2.5v.002zm-.865-43.75a2.415 2.415 0 0 1 4.23 0c.24.374.374.806.385 1.25a2.43 2.43 0 0 1-.385 1.25 2.415 2.415 0 0 1-4.23 0 2.43 2.43 0 0 1-.385-1.25c.011-.444.145-.876.385-1.25zm-8.75 0a2.415 2.415 0 0 1 4.23 0c.24.374.374.806.385 1.25a2.43 2.43 0 0 1-.385 1.25 2.415 2.415 0 0 1-4.23 0A2.43 2.43 0 0 1 15 8.127c.011-.444.145-.876.385-1.25zm-8.905.228a2.5 2.5 0 0 1 2.27-1.478 2.458 2.458 0 0 1 2.115 1.25c.24.374.374.806.385 1.25a2.43 2.43 0 0 1-.385 1.25 2.415 2.415 0 0 1-4.23 0 2.43 2.43 0 0 1-.385-1.25c.003-.353.081-.702.23-1.022z"></path>
		</symbol>
	
		<symbol id="icon-arrow-down-1" viewBox="0 0 24 24">
			<title>arrow-down-1</title><path d="M12 19.5a2.3 2.3 0 0 1-1.729-.78L.46 7.568a1.847 1.847 0 0 1 2.773-2.439l8.579 9.752a.25.25 0 0 0 .376 0l8.579-9.752a1.847 1.847 0 1 1 2.773 2.439l-9.808 11.148A2.31 2.31 0 0 1 12 19.5z"></path>
		</symbol>
	
		<symbol id="icon-arrow-left-1" viewBox="0 0 24 24">
			<title>arrow-left-1</title><path d="M4.5 12a2.3 2.3 0 0 1 .78-1.729L16.432.46a1.847 1.847 0 0 1 2.439 2.773l-9.752 8.579a.25.25 0 0 0 0 .376l9.752 8.579a1.847 1.847 0 1 1-2.439 2.773L5.284 13.732A2.31 2.31 0 0 1 4.5 12z"></path>
		</symbol>
	
		<symbol id="icon-arrow-right-1" viewBox="0 0 24 24">
			<title>arrow-right-1</title><path d="M19.5 12a2.3 2.3 0 0 1-.78 1.729L7.568 23.54a1.847 1.847 0 0 1-2.439-2.773l9.752-8.579a.25.25 0 0 0 0-.376L5.129 3.233A1.847 1.847 0 0 1 7.568.46l11.148 9.808A2.31 2.31 0 0 1 19.5 12z"></path>
		</symbol>
	
		<symbol id="icon-arrow-up-1" viewBox="0 0 24 24">
			<title>arrow-up-1</title><path d="M12 4.5a2.3 2.3 0 0 1 1.729.78l9.811 11.15a1.847 1.847 0 1 1-2.773 2.439l-8.579-9.75a.25.25 0 0 0-.376 0l-8.579 9.752A1.847 1.847 0 1 1 .46 16.432l9.808-11.148A2.31 2.31 0 0 1 12 4.5z"></path>
		</symbol>
	
		<symbol id="icon-browser-gauge" viewBox="0 0 24 24">
			<title>browser-gauge</title><path d="M6.122 16.9H4.163a.735.735 0 0 0 0 1.469h1.959a.735.735 0 1 0 0-1.469zM7.278 14.057l-1.7-.979a.735.735 0 1 0-.735 1.272l1.7.98a.735.735 0 0 0 .735-1.273zM8.718 10.477a.735.735 0 0 0-1.273.735l.98 1.7a.735.735 0 0 0 1.275-.738zM12 12.488a.735.735 0 0 0 .735-.735V9.8a.735.735 0 0 0-1.47 0v1.958a.735.735 0 0 0 .735.73zM19.156 14.349a.735.735 0 0 0-.734-1.273l-1.7.978a.735.735 0 0 0 .368 1.371.726.726 0 0 0 .366-.1zM19.839 16.9H17.88a.735.735 0 0 0 0 1.469h1.959a.735.735 0 0 0 0-1.469zM15.5 11.2l-4.277 4.27a2.726 2.726 0 0 0-.692 1.673v.489a.774.774 0 0 0 .96.788l.528-.105a2.024 2.024 0 0 0 1.324-1.1l2.357-5.886a.123.123 0 0 0-.2-.132z"></path><path d="M2.939 24h18.122A2.942 2.942 0 0 0 24 21.061V2.939A2.942 2.942 0 0 0 21.061 0H2.939A2.942 2.942 0 0 0 0 2.939v18.122A2.942 2.942 0 0 0 2.939 24zM11.02 2.939a.735.735 0 1 1-.734-.735.734.734 0 0 1 .734.735zm-2.938 0a.735.735 0 1 1-.735-.739.735.735 0 0 1 .735.739zm-2.939 0a.735.735 0 1 1-.735-.739.735.735 0 0 1 .735.739zm15.918 19.1H2.939a.98.98 0 0 1-.98-.98V6.633a1 1 0 0 1 1-1h18.082a1 1 0 0 1 1 1v14.428a.98.98 0 0 1-.98.98z"></path>
		</symbol>
	
		<symbol id="icon-check" viewBox="0 0 24 24">
			<path d="M23.146 5.4l-2.792-2.8a.499.499 0 0 0-.708 0L7.854 14.4a.5.5 0 0 1-.708 0l-2.792-2.8a.5.5 0 0 0-.708 0L.854 14.4a.5.5 0 0 0 0 .707L7.146 21.4a.5.5 0 0 0 .708 0L23.146 6.1a.5.5 0 0 0 0-.7z"></path>
		</symbol>
	
		<symbol id="icon-close" viewBox="0 0 24 24">
			<title>close</title><path d="M14.3 12.179a.25.25 0 0 1 0-.354l9.263-9.262A1.5 1.5 0 0 0 21.439.442L12.177 9.7a.25.25 0 0 1-.354 0L2.561.442A1.5 1.5 0 0 0 .439 2.563L9.7 11.825a.25.25 0 0 1 0 .354L.439 21.442a1.5 1.5 0 0 0 2.122 2.121l9.262-9.263a.25.25 0 0 1 .354 0l9.262 9.263a1.5 1.5 0 0 0 2.122-2.121z"></path>
		</symbol>
	
		<symbol id="icon-computer-bug-search" viewBox="0 0 54 54">
			<path d="M32.202 12.42a1.688 1.688 0 0 0-3.375 0 3.358 3.358 0 0 1-1.152 2.52.567.567 0 0 1-.565.113 6.782 6.782 0 0 0-2.216-.383 6.556 6.556 0 0 0-2.151.371.566.566 0 0 1-.551-.106 3.35 3.35 0 0 1-1.24-2.515 1.687 1.687 0 0 0-3.375 0 6.675 6.675 0 0 0 1.76 4.455.563.563 0 0 1 .04.7 6.689 6.689 0 0 0-1.208 3.229.563.563 0 0 0 .562.616H31.05a.562.562 0 0 0 .56-.617 6.679 6.679 0 0 0-1.21-3.23.56.56 0 0 1 .042-.698 6.678 6.678 0 0 0 1.76-4.455zM14.764 32.108a1.687 1.687 0 1 0 0 3.375h3.657a.566.566 0 0 1 .5.301 6.72 6.72 0 0 0 11.94 0 .565.565 0 0 1 .5-.301h3.653a1.687 1.687 0 1 0 0-3.375h-2.812a.562.562 0 0 1-.563-.563v-2.25a.563.563 0 0 1 .563-.563h2.812a1.687 1.687 0 1 0 0-3.374h-2.812a.562.562 0 0 1-.563-.563v-.563a.56.56 0 0 0-.562-.562H18.702a.562.562 0 0 0-.563.563v.562a.56.56 0 0 1-.562.563h-2.813a1.687 1.687 0 1 0 0 3.375h2.813a.561.561 0 0 1 .562.562v2.25a.56.56 0 0 1-.562.563h-2.813z"></path><path d="M0 24.761a24.703 24.703 0 0 0 38.97 20.214 1.125 1.125 0 0 1 1.449.126l7.819 7.9a3.376 3.376 0 0 0 4.774-4.772l-7.848-7.927a1.125 1.125 0 0 1-.121-1.435A24.733 24.733 0 0 0 20.666.35 24.733 24.733 0 0 0 0 24.761zm24.75-20.25A20.25 20.25 0 1 1 4.5 24.761a20.272 20.272 0 0 1 20.25-20.25z"></path>
		</symbol>
	
		<symbol id="icon-copy-paste" viewBox="0 0 24 24">
			<title>copy-paste</title><path d="M13.4 4.727a.251.251 0 0 0 .2.265 1.089 1.089 0 0 1 .824 1.108v1.4a1.244 1.244 0 0 0 1.244 1.244A1.244 1.244 0 0 0 16.913 7.5V3.975a1.494 1.494 0 0 0-1.5-1.494h-1.724a.246.246 0 0 0-.177.074.249.249 0 0 0-.073.177c.002.473.001 1.492-.039 1.995zM8.954 21.262a1.244 1.244 0 0 0-1.244-1.244H3.484a1.073 1.073 0 0 1-1-1.136V6.1a1.086 1.086 0 0 1 .842-1.115.25.25 0 0 0 .2-.258c-.039-.766-.051-1.6-.055-2a.25.25 0 0 0-.25-.247H1.5A1.494 1.494 0 0 0 0 3.975v17.037a1.493 1.493 0 0 0 1.494 1.493H7.71a1.244 1.244 0 0 0 1.244-1.243zM11.937 4.472V2.484a.5.5 0 0 0-.5-.5h-.758a.251.251 0 0 1-.249-.222 1.989 1.989 0 0 0-3.953 0 .249.249 0 0 1-.249.222h-.755a.5.5 0 0 0-.5.5v1.988a.5.5 0 0 0 .5.5h5.967a.5.5 0 0 0 .497-.5zM19.02 17.269h-3.979a.75.75 0 1 0 0 1.5h3.979a.75.75 0 1 0 0-1.5zM14.291 14.54a.75.75 0 0 0 .75.749h2.486a.75.75 0 1 0 0-1.5h-2.486a.75.75 0 0 0-.75.751z"></path><path d="M23.5 13.46a1.991 1.991 0 0 0-.584-1.409l-1.406-1.4a1.994 1.994 0 0 0-1.41-.584h-7.606a1.993 1.993 0 0 0-1.994 1.988V22a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2zm-11-.4a1 1 0 0 1 1-1h6.187a1 1 0 0 1 .707.292l.818.816a1 1 0 0 1 .293.708V21a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1z"></path>
		</symbol>
	
		<symbol id="icon-crypto-currency-bitcoin-circle" viewBox="0 0 55 55">
			<g clip-path="url(#a)"><path d="M24.276 17.98a.573.573 0 0 0-.573.573v4.971a.573.573 0 0 0 .573.573h3.964a3.06 3.06 0 0 0 0-6.117h-3.964zM28.24 29.826h-3.964a.573.573 0 0 0-.573.573v4.973a.573.573 0 0 0 .573.573h3.964a3.06 3.06 0 1 0 0-6.12z"></path><path d="M27.5 0a27.5 27.5 0 1 0 0 55 27.5 27.5 0 0 0 0-55zm7.505 26.597a.57.57 0 0 0 0 .729 8.723 8.723 0 0 1-6.318 14.293.573.573 0 0 0-.545.57v1.353a2.865 2.865 0 0 1-5.73 0v-1.295a.57.57 0 0 0-.572-.573h-1.002a2.864 2.864 0 0 1-2.864-2.865V15.125a2.861 2.861 0 0 1 2.864-2.865h1.004a.573.573 0 0 0 .573-.572v-.23a2.865 2.865 0 0 1 5.729 0v.346a.5.5 0 0 0 .479.5 8.708 8.708 0 0 1 6.382 14.293z"></path></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h55v55H0z"></path></clipPath></defs>
		</symbol>
	
		<symbol id="icon-github" viewBox="0 0 23 22">
			<path clip-rule="evenodd" d="M11.5 0C5.15 0 0 5.05 0 11.28c0 4.982 3.295 9.209 7.865 10.7.575.104.785-.244.785-.543 0-.268-.01-.977-.016-1.918-3.199.682-3.874-1.512-3.874-1.512-.522-1.303-1.276-1.65-1.276-1.65-1.045-.7.079-.685.079-.685 1.153.08 1.76 1.162 1.76 1.162 1.027 1.724 2.692 1.226 3.348.937.104-.73.402-1.226.73-1.508-2.553-.285-5.238-1.252-5.238-5.574 0-1.231.448-2.238 1.184-3.027-.119-.285-.513-1.431.112-2.984 0 0 .966-.303 3.162 1.156.918-.25 1.902-.375 2.88-.38.976.005 1.96.13 2.879.38 2.195-1.46 3.159-1.156 3.159-1.156.627 1.553.233 2.699.114 2.984.738.79 1.183 1.796 1.183 3.027 0 4.333-2.69 5.286-5.25 5.566.412.348.78 1.036.78 2.088 0 1.508-.015 2.724-.015 3.094 0 .302.207.653.79.542C19.709 20.485 23 16.26 23 11.28 23 5.05 17.85 0 11.5 0z"></path>
		</symbol>
	
		<symbol id="icon-list-to-do" viewBox="0 0 24 24">
			<title>list-to-do</title><path d="M10.414 13.531l-1.375 1.718a.139.139 0 0 1-.228 0l-.781-.781a.75.75 0 0 0-1.06 1.062l1.5 1.5a.748.748 0 0 0 .53.219h.041a.75.75 0 0 0 .545-.28l2-2.5a.75.75 0 0 0-1.172-.937zM10.414 8.031L9.039 9.749a.139.139 0 0 1-.228 0l-.781-.78a.75.75 0 0 0-1.06 1.061l1.5 1.5a.748.748 0 0 0 .53.219h.041a.75.75 0 0 0 .545-.28l2-2.5a.75.75 0 0 0-1.172-.937zM16 9.749h-2.5a.75.75 0 0 0 0 1.5H16a.75.75 0 0 0 0-1.5zM16 15.249h-2.5a.75.75 0 1 0 0 1.5H16a.75.75 0 0 0 0-1.5z"></path><path d="M21.707 5.706L16.293.292A1 1 0 0 0 15.586 0H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.413a1 1 0 0 0-.293-.707zM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25z"></path>
		</symbol>
	
		<symbol id="icon-module" viewBox="0 0 54 54">
			<path d="M50.677 7.526l-21.91-5.94a6.816 6.816 0 0 0-3.533 0l-21.91 5.94A4.563 4.563 0 0 0 0 11.871v28.22a4.5 4.5 0 0 0 3.022 4.25l22.817 7.938c.73.254 1.5.379 2.273.369a6.386 6.386 0 0 0 2.346-.437l20.644-7.875A4.687 4.687 0 0 0 54 40.14V11.871a4.55 4.55 0 0 0-3.323-4.345zM26.41 5.931a2.277 2.277 0 0 1 1.18 0l13.853 3.755a.563.563 0 0 1 0 1.085l-13.194 3.793a.563.563 0 0 1-.3 0l-14.93-3.917a.562.562 0 0 1 0-1.087L26.41 5.931zM4.878 40.221a.562.562 0 0 1-.378-.53V13.794a.565.565 0 0 1 .457-.555.572.572 0 0 1 .254.006l20.25 5.314a.561.561 0 0 1 .42.545v27.63a.556.556 0 0 1-.482.548.568.568 0 0 1-.264-.024L4.878 40.221z" fill="#0B476D"></path>
		</symbol>
	
		<symbol id="icon-navigation-menu" viewBox="0 0 24 24">
			<title>navigation-menu</title><rect x=".5" y="2.5" width="23" height="3" rx="1" ry="1"></rect><rect x=".5" y="10.5" width="23" height="3" rx="1" ry="1"></rect><rect x=".5" y="18.5" width="23" height="3" rx="1" ry="1"></rect>
		</symbol>
	
		<symbol id="icon-notes-paper-text" viewBox="0 0 54 54">
			<g clip-path="url(#a)" fill="#0B476D"><path d="M42.09 20.716l2.25-2.25a2.25 2.25 0 1 0-3.18-3.182l-2.25 2.25a2.251 2.251 0 0 1-3.184 0 6.912 6.912 0 0 0-9.545 0 2.25 2.25 0 0 1-3.181 0 6.914 6.914 0 0 0-9.547 0l-2.25 2.25a2.25 2.25 0 0 0 3.184 3.182l2.25-2.25a2.304 2.304 0 0 1 3.181 0 6.75 6.75 0 0 0 9.544 0 2.304 2.304 0 0 1 3.182 0 6.75 6.75 0 0 0 9.547 0zM26.181 31.034a2.25 2.25 0 0 1-3.181 0 6.914 6.914 0 0 0-9.547 0l-2.25 2.25a2.25 2.25 0 0 0 3.184 3.182l2.25-2.25a2.304 2.304 0 0 1 3.181 0 6.75 6.75 0 0 0 9.544 0 2.25 2.25 0 0 0-3.181-3.182z"></path><path d="M54 4.5A4.5 4.5 0 0 0 49.5 0h-45A4.5 4.5 0 0 0 0 4.5v45A4.5 4.5 0 0 0 4.5 54H36a2.25 2.25 0 0 0 1.59-.66l15.75-15.75A2.25 2.25 0 0 0 54 36V4.5zM4.5 5.625A1.125 1.125 0 0 1 5.625 4.5h42.75A1.125 1.125 0 0 1 49.5 5.625V33.75a1.125 1.125 0 0 1-1.125 1.125h-9a4.5 4.5 0 0 0-4.5 4.5v9A1.125 1.125 0 0 1 33.75 49.5H5.625A1.125 1.125 0 0 1 4.5 48.375V5.625z"></path></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h54v54H0z"></path></clipPath></defs>
		</symbol>
	
		<symbol id="icon-paginate-filter-video-alternate" viewBox="0 0 54 54">
			<g clip-path="url(#a)" fill="#0B476D"><path d="M40.446 20.637L27.12 13.023a2.337 2.337 0 0 0-3.496 2.025v15.226a2.338 2.338 0 0 0 3.496 2.025l13.325-7.616a2.335 2.335 0 0 0 0-4.05l.002.004z"></path><path d="M49.5 0H12.375a4.5 4.5 0 0 0-4.5 4.5v37.125a4.5 4.5 0 0 0 4.5 4.5H49.5a4.5 4.5 0 0 0 4.5-4.5V4.5A4.5 4.5 0 0 0 49.5 0zm-.326 41.297a1.123 1.123 0 0 1-.797.328H13.5a1.125 1.125 0 0 1-1.125-1.125V5.625A1.125 1.125 0 0 1 13.5 4.5h34.875A1.125 1.125 0 0 1 49.5 5.625V40.5c0 .296-.118.58-.326.79v.007z"></path><path d="M43.875 49.5H5.625A1.125 1.125 0 0 1 4.5 48.375v-38.25a2.25 2.25 0 1 0-4.5 0V49.5A4.5 4.5 0 0 0 4.5 54h39.375a2.25 2.25 0 0 0 0-4.5z"></path></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h54v54H0z"></path></clipPath></defs>
		</symbol>
	
		<symbol id="icon-pen-write-paper" viewBox="0 0 50 50">
			<g clip-path="url(#a)" fill="#0B476D"><path d="M39.583 27.083a2.083 2.083 0 0 0-2.083 2.084v6.25h-6.25a4.167 4.167 0 0 0-4.167 4.166v6.25H6.25a2.083 2.083 0 0 1-2.083-2.083V6.25A2.083 2.083 0 0 1 6.25 4.167h14.583a2.083 2.083 0 1 0 0-4.167H6.25A6.25 6.25 0 0 0 0 6.25v37.5A6.25 6.25 0 0 0 6.25 50h20.833a4.139 4.139 0 0 0 2.946-1.22l10.417-10.418a4.184 4.184 0 0 0 1.22-2.945v-6.25a2.083 2.083 0 0 0-2.083-2.084z"></path><path d="M18.188 26.085a1.043 1.043 0 0 0-.736.752l-1.16 4.66-2.609 2.61a1.562 1.562 0 0 0 2.209 2.21l2.633-2.63 4.598-1.156a1.042 1.042 0 0 0 .485-1.744l-4.406-4.433a1.041 1.041 0 0 0-1.015-.269zM49.39.61a2.083 2.083 0 0 0-2.946 0l-1.875 1.875a4.19 4.19 0 0 0-3.194.434l-.108-.106a6.25 6.25 0 0 0-8.823.012l-7.525 7.51a2.083 2.083 0 0 0 0 2.946 2.108 2.108 0 0 0 2.948 0l7.55-7.529a2.083 2.083 0 0 1 2.93.015L36.876 7.24a1.042 1.042 0 0 0 0 1.473l4.413 4.412a1.041 1.041 0 0 0 1.472 0l3.684-3.683A4.167 4.167 0 0 0 47.52 5.42l1.875-1.875A2.083 2.083 0 0 0 49.39.61z"></path><path d="M25.833 29.625c.276 0 .54-.11.736-.306l13.241-13.24a1.042 1.042 0 0 0 0-1.473l-4.414-4.42a1.071 1.071 0 0 0-1.473 0L20.68 23.426a1.041 1.041 0 0 0 0 1.473l4.419 4.419c.194.195.458.305.733.306z"></path></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h50v50H0z"></path></clipPath></defs>
		</symbol>
	
		<symbol id="icon-pie-line-graph" viewBox="0 0 50 50">
			<path d="M6.123 50h37.754A6.13 6.13 0 0 0 50 43.877V6.123A6.13 6.13 0 0 0 43.877 0H6.123A6.13 6.13 0 0 0 0 6.123v37.754A6.13 6.13 0 0 0 6.123 50zm37.754-4.081H6.123a2.042 2.042 0 0 1-2.042-2.042V6.25a2.083 2.083 0 0 1 2.084-2.083h37.67A2.083 2.083 0 0 1 45.92 6.25v37.627a2.042 2.042 0 0 1-2.042 2.042z" fill="#0B476D"></path><path d="M39.242 32.483l-4.3 3.817a.525.525 0 0 1-.657.03l-2.845-2.11a3.913 3.913 0 0 0-2.365-.705 3.685 3.685 0 0 0-2.331.898L21.5 39.067a2.087 2.087 0 1 0 2.767 3.125l4.652-4.13a.521.521 0 0 1 .654-.029l2.846 2.109c.69.485 1.52.734 2.364.708a3.687 3.687 0 0 0 2.332-.9l4.893-4.342a2.088 2.088 0 0 0-2.766-3.125zM29.856 21.09a.434.434 0 0 0-.323-.182l-8.47-.654a.436.436 0 0 0-.463.535l1.842 8.294a.444.444 0 0 0 .407.344.438.438 0 0 0 .186-.031 11.472 11.472 0 0 0 6.892-7.938.433.433 0 0 0-.07-.369zM15.019 7.935a.441.441 0 0 0-.242.625l4.72 8.732a.436.436 0 0 0 .353.227l9.883.764a.44.44 0 0 0 .473-.477 11.457 11.457 0 0 0-15.187-9.86v-.01zM12.158 9.6a.437.437 0 0 0-.36.081 11.458 11.458 0 0 0 6.994 20.527c.223 0 .443 0 .664-.018a.433.433 0 0 0 .325-.175.446.446 0 0 0 .08-.36l-2.307-10.378a.471.471 0 0 0-.041-.114L12.453 9.82a.441.441 0 0 0-.296-.22zM38.542 13.542a2.083 2.083 0 1 0 0-4.167 2.083 2.083 0 0 0 0 4.167zM38.542 19.792a2.083 2.083 0 1 0 0-4.167 2.083 2.083 0 0 0 0 4.167zM38.542 26.042a2.083 2.083 0 1 0 0-4.167 2.083 2.083 0 0 0 0 4.167z" fill="#0B476D"></path>
		</symbol>
	
		<symbol id="icon-rating-star" viewBox="0 0 16 16">
			<path d="M15.704 5.82a1.003 1.003 0 0 0-.938-.654H10.71a.333.333 0 0 1-.315-.223L8.937.815a1 1 0 0 0-1.873 0l-.004.01-1.453 4.118a.333.333 0 0 1-.314.223h-4.06a1 1 0 0 0-.641 1.767L4.048 9.8a.333.333 0 0 1 .103.362L2.7 14.516a1 1 0 0 0 1.54 1.123l3.564-2.614a.334.334 0 0 1 .394 0l3.563 2.613a1 1 0 0 0 1.541-1.122l-1.452-4.357a.333.333 0 0 1 .104-.362l3.462-2.87a1 1 0 0 0 .289-1.108z" fill="#fff"></path>
		</symbol>
	
		<symbol id="icon-search-bar" viewBox="0 0 68 68">
			<path d="M60.177 57.08a.706.706 0 0 1-.085-.895 14.308 14.308 0 1 0-3.913 3.913.709.709 0 0 1 .896.085l7.182 7.18a2.221 2.221 0 0 0 3.117 0 2.193 2.193 0 0 0 0-3.1l-7.197-7.183zM48.26 58.137a9.872 9.872 0 1 1 9.872-9.871 9.882 9.882 0 0 1-9.872 9.871z" fill="#0B476D"></path><path d="M29.75 48.85a.705.705 0 0 0-.694-.683H7.083a1.417 1.417 0 0 1-1.416-1.417V24.083a1.417 1.417 0 0 1 1.416-1.416h51a1.417 1.417 0 0 1 1.417 1.416v9.229a.703.703 0 0 0 .264.55 18.532 18.532 0 0 1 4.09 4.657.71.71 0 0 0 1.313-.374V22.667A5.667 5.667 0 0 0 59.5 17H5.667A5.667 5.667 0 0 0 0 22.667v25.5a5.667 5.667 0 0 0 5.667 5.666H29.69a.706.706 0 0 0 .686-.892 18.522 18.522 0 0 1-.626-4.092z" fill="#0B476D"></path><path d="M14.167 38.25a2.833 2.833 0 1 0 0-5.667 2.833 2.833 0 0 0 0 5.667zM25.5 38.25a2.833 2.833 0 1 0 0-5.667 2.833 2.833 0 0 0 0 5.667z" fill="#0B476D"></path>
		</symbol>
	
		<symbol id="icon-symbols" viewBox="">
			
		</symbol>
	
		<symbol id="icon-tag-new-circle" viewBox="0 0 54 54">
			<g clip-path="url(#a)"><path d="M27 0a27 27 0 1 0 27 27A27.03 27.03 0 0 0 27 0zm-7.69 20.25V36a1.687 1.687 0 0 1-1.697 1.688 1.687 1.687 0 0 1-1.51-.932l-3.6-7.227a.563.563 0 0 0-1.066.252V36a1.687 1.687 0 1 1-3.375 0V20.25a1.687 1.687 0 0 1 3.188-.756l3.6 7.227a.562.562 0 0 0 1.066-.252V20.25a1.687 1.687 0 1 1 3.375 0h.018zm1.928 2.626a4.318 4.318 0 0 1 4.313-4.314h5.25a1.687 1.687 0 0 1 0 3.375h-5.25a.943.943 0 0 0-.938.939v2.999a.562.562 0 0 0 .562.563h3.002a1.687 1.687 0 0 1 0 3.375h-3.002a.563.563 0 0 0-.562.562v3a.942.942 0 0 0 .938.938h5.25a1.687 1.687 0 0 1 0 3.374h-5.25a4.318 4.318 0 0 1-4.313-4.313V22.876zM42.953 36.6l-1.182-3.072a.563.563 0 0 0-1.048 0l-1.181 3.072a1.687 1.687 0 0 1-3.25-.398l-1.968-15.75a1.687 1.687 0 1 1 3.348-.419l.857 6.849a.563.563 0 0 0 1.082.13l.061-.157a1.757 1.757 0 0 1 3.15 0l.06.157a.562.562 0 0 0 1.085-.13l.855-6.849a1.688 1.688 0 1 1 3.348.419l-1.968 15.75a1.683 1.683 0 0 1-1.674 1.478 1.685 1.685 0 0 1-1.575-1.073V36.6z" fill="#0B476D"></path></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h54v54H0z"></path></clipPath></defs>
		</symbol>
	
		<symbol id="icon-twitter" viewBox="0 0 27 27">
			<path d="M0 13.5C0 6.044 6.044 0 13.5 0S27 6.044 27 13.5 20.956 27 13.5 27 0 20.956 0 13.5z" fill="#55ACEE"></path><path d="M13.096 10.973l.028.467-.472-.057c-1.719-.22-3.22-.963-4.495-2.212l-.623-.62-.16.458c-.34 1.02-.124 2.097.585 2.822.377.4.292.458-.36.22-.226-.077-.424-.134-.443-.106-.066.067.16.935.34 1.278.246.476.746.944 1.294 1.22l.462.22-.547.009c-.53 0-.548.01-.491.21.189.62.935 1.277 1.765 1.563l.586.2-.51.305a5.316 5.316 0 0 1-2.53.706c-.426.01-.775.047-.775.076 0 .095 1.152.63 1.822.839 2.012.62 4.4.353 6.195-.706 1.275-.753 2.55-2.25 3.145-3.698.32-.773.642-2.184.642-2.86 0-.439.028-.496.557-1.02.311-.306.604-.64.66-.735.095-.18.086-.18-.396-.019-.802.286-.916.248-.52-.18.294-.306.643-.859.643-1.02 0-.03-.142.018-.302.104-.17.095-.548.238-.831.324l-.51.162-.463-.314c-.255-.172-.614-.363-.802-.42-.482-.133-1.219-.114-1.653.038-1.18.43-1.926 1.535-1.841 2.746z" fill="#fff"></path>
		</symbol>
	
</svg>

<header>
    <h1 id="logo">Gulp SVG Sprites <small>(24 icons in &lt;symbol&gt; mode)</small></h1>
    <h4>Files Generated:</h4>
    <ol>
        <li><a href="symbols.svg">symbols.svg</a></li>
    </ol>
    <h4>Usage:</h4>
    <ol>
        <li>
            Include the <strong>contents</strong> of the <a href="symbols.svg">SVG file</a> just after the opening <code>&lt;body&gt;</code> tag.
        </li>
        <li>
            Paste one of the snippets anywhere into your website.
        </li>
    </ol>

</header>
<section>
    <ul class="icon-boxes">
        

        <li title="icon-app-window-search-text">
            <div class="icon-box" id="icon-box-icon-app-window-search-text">
                <svg class="icon icon-app-window-search-text">
                    <use xlink:href="#icon-app-window-search-text" />
                </svg>
            </div>
            <h2>icon-app-window-search-text</h2>
            <button onclick="showPopover('snippet-icon-app-window-search-text')">Show Snippet</button>
            <br/>
            <button onclick="invertBackground('icon-box-icon-app-window-search-text')">Invert Background</button>
            <div class="snippet-popover" id="snippet-icon-app-window-search-text">
                <pre><code>&lt;svg class=&quot;icon icon-app-window-search-text&quot;&gt;&lt;use xlink:href=&quot;#icon-app-window-search-text&quot;&gt;&lt;/use&gt;&lt;/svg&gt;</code></pre>
                <button onclick="hidePopover()">Close</button>
            </div>
        </li>
        

        <li title="icon-arrow-down-1">
            <div class="icon-box" id="icon-box-icon-arrow-down-1">
                <svg class="icon icon-arrow-down-1">
                    <use xlink:href="#icon-arrow-down-1" />
                </svg>
            </div>
            <h2>icon-arrow-down-1</h2>
            <button onclick="showPopover('snippet-icon-arrow-down-1')">Show Snippet</button>
            <br/>
            <button onclick="invertBackground('icon-box-icon-arrow-down-1')">Invert Background</button>
            <div class="snippet-popover" id="snippet-icon-arrow-down-1">
                <pre><code>&lt;svg class=&quot;icon icon-arrow-down-1&quot;&gt;&lt;use xlink:href=&quot;#icon-arrow-down-1&quot;&gt;&lt;/use&gt;&lt;/svg&gt;</code></pre>
                <button onclick="hidePopover()">Close</button>
            </div>
        </li>
        

        <li title="icon-arrow-left-1">
            <div class="icon-box" id="icon-box-icon-arrow-left-1">
                <svg class="icon icon-arrow-left-1">
                    <use xlink:href="#icon-arrow-left-1" />
                </svg>
            </div>
            <h2>icon-arrow-left-1</h2>
            <button onclick="showPopover('snippet-icon-arrow-left-1')">Show Snippet</button>
            <br/>
            <button onclick="invertBackground('icon-box-icon-arrow-left-1')">Invert Background</button>
            <div class="snippet-popover" id="snippet-icon-arrow-left-1">
                <pre><code>&lt;svg class=&quot;icon icon-arrow-left-1&quot;&gt;&lt;use xlink:href=&quot;#icon-arrow-left-1&quot;&gt;&lt;/use&gt;&lt;/svg&gt;</code></pre>
                <button onclick="hidePopover()">Close</button>
            </div>
        </li>
        

        <li title="icon-arrow-right-1">
            <div class="icon-box" id="icon-box-icon-arrow-right-1">
                <svg class="icon icon-arrow-right-1">
                    <use xlink:href="#icon-arrow-right-1" />
                </svg>
            </div>
            <h2>icon-arrow-right-1</h2>
            <button onclick="showPopover('snippet-icon-arrow-right-1')">Show Snippet</button>
            <br/>
            <button onclick="invertBackground('icon-box-icon-arrow-right-1')">Invert Background</button>
            <div class="snippet-popover" id="snippet-icon-arrow-right-1">
                <pre><code>&lt;svg class=&quot;icon icon-arrow-right-1&quot;&gt;&lt;use xlink:href=&quot;#icon-arrow-right-1&quot;&gt;&lt;/use&gt;&lt;/svg&gt;</code></pre>
                <button onclick="hidePopover()">Close</button>
            </div>
        </li>
        

        <li title="icon-arrow-up-1">
            <div class="icon-box" id="icon-box-icon-arrow-up-1">
                <svg class="icon icon-arrow-up-1">
                    <use xlink:href="#icon-arrow-up-1" />
                </svg>
            </div>
            <h2>icon-arrow-up-1</h2>
            <button onclick="showPopover('snippet-icon-arrow-up-1')">Show Snippet</button>
            <br/>
            <button onclick="invertBackground('icon-box-icon-arrow-up-1')">Invert Background</button>
            <div class="snippet-popover" id="snippet-icon-arrow-up-1">
                <pre><code>&lt;svg class=&quot;icon icon-arrow-up-1&quot;&gt;&lt;use xlink:href=&quot;#icon-arrow-up-1&quot;&gt;&lt;/use&gt;&lt;/svg&gt;</code></pre>
                <button onclick="hidePopover()">Close</button>
            </div>
        </li>
        

        <li title="icon-browser-gauge">
            <div class="icon-box" id="icon-box-icon-browser-gauge">
                <svg class="icon icon-browser-gauge">
                    <use xlink:href="#icon-browser-gauge" />
                </svg>
            </div>
            <h2>icon-browser-gauge</h2>
            <button onclick="showPopover('snippet-icon-browser-gauge')">Show Snippet</button>
            <br/>
            <button onclick="invertBackground('icon-box-icon-browser-gauge')">Invert Background</button>
            <div class="snippet-popover" id="snippet-icon-browser-gauge">
                <pre><code>&lt;svg class=&quot;icon icon-browser-gauge&quot;&gt;&lt;use xlink:href=&quot;#icon-browser-gauge&quot;&gt;&lt;/use&gt;&lt;/svg&gt;</code></pre>
                <button onclick="hidePopover()">Close</button>
            </div>
        </li>
        

        <li title="icon-check">
            <div class="icon-box" id="icon-box-icon-check">
                <svg class="icon icon-check">
                    <use xlink:href="#icon-check" />
                </svg>
            </div>
            <h2>icon-check</h2>
            <button onclick="showPopover('snippet-icon-check')">Show Snippet</button>
            <br/>
            <button onclick="invertBackground('icon-box-icon-check')">Invert Background</button>
            <div class="snippet-popover" id="snippet-icon-check">
                <pre><code>&lt;svg class=&quot;icon icon-check&quot;&gt;&lt;use xlink:href=&quot;#icon-check&quot;&gt;&lt;/use&gt;&lt;/svg&gt;</code></pre>
                <button onclick="hidePopover()">Close</button>
            </div>
        </li>
        

        <li title="icon-close">
            <div class="icon-box" id="icon-box-icon-close">
                <svg class="icon icon-close">
                    <use xlink:href="#icon-close" />
                </svg>
            </div>
            <h2>icon-close</h2>
            <button onclick="showPopover('snippet-icon-close')">Show Snippet</button>
            <br/>
            <button onclick="invertBackground('icon-box-icon-close')">Invert Background</button>
            <div class="snippet-popover" id="snippet-icon-close">
                <pre><code>&lt;svg class=&quot;icon icon-close&quot;&gt;&lt;use xlink:href=&quot;#icon-close&quot;&gt;&lt;/use&gt;&lt;/svg&gt;</code></pre>
                <button onclick="hidePopover()">Close</button>
            </div>
        </li>
        

        <li title="icon-computer-bug-search">
            <div class="icon-box" id="icon-box-icon-computer-bug-search">
                <svg class="icon icon-computer-bug-search">
                    <use xlink:href="#icon-computer-bug-search" />
                </svg>
            </div>
            <h2>icon-computer-bug-search</h2>
            <button onclick="showPopover('snippet-icon-computer-bug-search')">Show Snippet</button>
            <br/>
            <button onclick="invertBackground('icon-box-icon-computer-bug-search')">Invert Background</button>
            <div class="snippet-popover" id="snippet-icon-computer-bug-search">
                <pre><code>&lt;svg class=&quot;icon icon-computer-bug-search&quot;&gt;&lt;use xlink:href=&quot;#icon-computer-bug-search&quot;&gt;&lt;/use&gt;&lt;/svg&gt;</code></pre>
                <button onclick="hidePopover()">Close</button>
            </div>
        </li>
        

        <li title="icon-copy-paste">
            <div class="icon-box" id="icon-box-icon-copy-paste">
                <svg class="icon icon-copy-paste">
                    <use xlink:href="#icon-copy-paste" />
                </svg>
            </div>
            <h2>icon-copy-paste</h2>
            <button onclick="showPopover('snippet-icon-copy-paste')">Show Snippet</button>
            <br/>
            <button onclick="invertBackground('icon-box-icon-copy-paste')">Invert Background</button>
            <div class="snippet-popover" id="snippet-icon-copy-paste">
                <pre><code>&lt;svg class=&quot;icon icon-copy-paste&quot;&gt;&lt;use xlink:href=&quot;#icon-copy-paste&quot;&gt;&lt;/use&gt;&lt;/svg&gt;</code></pre>
                <button onclick="hidePopover()">Close</button>
            </div>
        </li>
        

        <li title="icon-crypto-currency-bitcoin-circle">
            <div class="icon-box" id="icon-box-icon-crypto-currency-bitcoin-circle">
                <svg class="icon icon-crypto-currency-bitcoin-circle">
                    <use xlink:href="#icon-crypto-currency-bitcoin-circle" />
                </svg>
            </div>
            <h2>icon-crypto-currency-bitcoin-circle</h2>
            <button onclick="showPopover('snippet-icon-crypto-currency-bitcoin-circle')">Show Snippet</button>
            <br/>
            <button onclick="invertBackground('icon-box-icon-crypto-currency-bitcoin-circle')">Invert Background</button>
            <div class="snippet-popover" id="snippet-icon-crypto-currency-bitcoin-circle">
                <pre><code>&lt;svg class=&quot;icon icon-crypto-currency-bitcoin-circle&quot;&gt;&lt;use xlink:href=&quot;#icon-crypto-currency-bitcoin-circle&quot;&gt;&lt;/use&gt;&lt;/svg&gt;</code></pre>
                <button onclick="hidePopover()">Close</button>
            </div>
        </li>
        

        <li title="icon-github">
            <div class="icon-box" id="icon-box-icon-github">
                <svg class="icon icon-github">
                    <use xlink:href="#icon-github" />
                </svg>
            </div>
            <h2>icon-github</h2>
            <button onclick="showPopover('snippet-icon-github')">Show Snippet</button>
            <br/>
            <button onclick="invertBackground('icon-box-icon-github')">Invert Background</button>
            <div class="snippet-popover" id="snippet-icon-github">
                <pre><code>&lt;svg class=&quot;icon icon-github&quot;&gt;&lt;use xlink:href=&quot;#icon-github&quot;&gt;&lt;/use&gt;&lt;/svg&gt;</code></pre>
                <button onclick="hidePopover()">Close</button>
            </div>
        </li>
        

        <li title="icon-list-to-do">
            <div class="icon-box" id="icon-box-icon-list-to-do">
                <svg class="icon icon-list-to-do">
                    <use xlink:href="#icon-list-to-do" />
                </svg>
            </div>
            <h2>icon-list-to-do</h2>
            <button onclick="showPopover('snippet-icon-list-to-do')">Show Snippet</button>
            <br/>
            <button onclick="invertBackground('icon-box-icon-list-to-do')">Invert Background</button>
            <div class="snippet-popover" id="snippet-icon-list-to-do">
                <pre><code>&lt;svg class=&quot;icon icon-list-to-do&quot;&gt;&lt;use xlink:href=&quot;#icon-list-to-do&quot;&gt;&lt;/use&gt;&lt;/svg&gt;</code></pre>
                <button onclick="hidePopover()">Close</button>
            </div>
        </li>
        

        <li title="icon-module">
            <div class="icon-box" id="icon-box-icon-module">
                <svg class="icon icon-module">
                    <use xlink:href="#icon-module" />
                </svg>
            </div>
            <h2>icon-module</h2>
            <button onclick="showPopover('snippet-icon-module')">Show Snippet</button>
            <br/>
            <button onclick="invertBackground('icon-box-icon-module')">Invert Background</button>
            <div class="snippet-popover" id="snippet-icon-module">
                <pre><code>&lt;svg class=&quot;icon icon-module&quot;&gt;&lt;use xlink:href=&quot;#icon-module&quot;&gt;&lt;/use&gt;&lt;/svg&gt;</code></pre>
                <button onclick="hidePopover()">Close</button>
            </div>
        </li>
        

        <li title="icon-navigation-menu">
            <div class="icon-box" id="icon-box-icon-navigation-menu">
                <svg class="icon icon-navigation-menu">
                    <use xlink:href="#icon-navigation-menu" />
                </svg>
            </div>
            <h2>icon-navigation-menu</h2>
            <button onclick="showPopover('snippet-icon-navigation-menu')">Show Snippet</button>
            <br/>
            <button onclick="invertBackground('icon-box-icon-navigation-menu')">Invert Background</button>
            <div class="snippet-popover" id="snippet-icon-navigation-menu">
                <pre><code>&lt;svg class=&quot;icon icon-navigation-menu&quot;&gt;&lt;use xlink:href=&quot;#icon-navigation-menu&quot;&gt;&lt;/use&gt;&lt;/svg&gt;</code></pre>
                <button onclick="hidePopover()">Close</button>
            </div>
        </li>
        

        <li title="icon-notes-paper-text">
            <div class="icon-box" id="icon-box-icon-notes-paper-text">
                <svg class="icon icon-notes-paper-text">
                    <use xlink:href="#icon-notes-paper-text" />
                </svg>
            </div>
            <h2>icon-notes-paper-text</h2>
            <button onclick="showPopover('snippet-icon-notes-paper-text')">Show Snippet</button>
            <br/>
            <button onclick="invertBackground('icon-box-icon-notes-paper-text')">Invert Background</button>
            <div class="snippet-popover" id="snippet-icon-notes-paper-text">
                <pre><code>&lt;svg class=&quot;icon icon-notes-paper-text&quot;&gt;&lt;use xlink:href=&quot;#icon-notes-paper-text&quot;&gt;&lt;/use&gt;&lt;/svg&gt;</code></pre>
                <button onclick="hidePopover()">Close</button>
            </div>
        </li>
        

        <li title="icon-paginate-filter-video-alternate">
            <div class="icon-box" id="icon-box-icon-paginate-filter-video-alternate">
                <svg class="icon icon-paginate-filter-video-alternate">
                    <use xlink:href="#icon-paginate-filter-video-alternate" />
                </svg>
            </div>
            <h2>icon-paginate-filter-video-alternate</h2>
            <button onclick="showPopover('snippet-icon-paginate-filter-video-alternate')">Show Snippet</button>
            <br/>
            <button onclick="invertBackground('icon-box-icon-paginate-filter-video-alternate')">Invert Background</button>
            <div class="snippet-popover" id="snippet-icon-paginate-filter-video-alternate">
                <pre><code>&lt;svg class=&quot;icon icon-paginate-filter-video-alternate&quot;&gt;&lt;use xlink:href=&quot;#icon-paginate-filter-video-alternate&quot;&gt;&lt;/use&gt;&lt;/svg&gt;</code></pre>
                <button onclick="hidePopover()">Close</button>
            </div>
        </li>
        

        <li title="icon-pen-write-paper">
            <div class="icon-box" id="icon-box-icon-pen-write-paper">
                <svg class="icon icon-pen-write-paper">
                    <use xlink:href="#icon-pen-write-paper" />
                </svg>
            </div>
            <h2>icon-pen-write-paper</h2>
            <button onclick="showPopover('snippet-icon-pen-write-paper')">Show Snippet</button>
            <br/>
            <button onclick="invertBackground('icon-box-icon-pen-write-paper')">Invert Background</button>
            <div class="snippet-popover" id="snippet-icon-pen-write-paper">
                <pre><code>&lt;svg class=&quot;icon icon-pen-write-paper&quot;&gt;&lt;use xlink:href=&quot;#icon-pen-write-paper&quot;&gt;&lt;/use&gt;&lt;/svg&gt;</code></pre>
                <button onclick="hidePopover()">Close</button>
            </div>
        </li>
        

        <li title="icon-pie-line-graph">
            <div class="icon-box" id="icon-box-icon-pie-line-graph">
                <svg class="icon icon-pie-line-graph">
                    <use xlink:href="#icon-pie-line-graph" />
                </svg>
            </div>
            <h2>icon-pie-line-graph</h2>
            <button onclick="showPopover('snippet-icon-pie-line-graph')">Show Snippet</button>
            <br/>
            <button onclick="invertBackground('icon-box-icon-pie-line-graph')">Invert Background</button>
            <div class="snippet-popover" id="snippet-icon-pie-line-graph">
                <pre><code>&lt;svg class=&quot;icon icon-pie-line-graph&quot;&gt;&lt;use xlink:href=&quot;#icon-pie-line-graph&quot;&gt;&lt;/use&gt;&lt;/svg&gt;</code></pre>
                <button onclick="hidePopover()">Close</button>
            </div>
        </li>
        

        <li title="icon-rating-star">
            <div class="icon-box" id="icon-box-icon-rating-star">
                <svg class="icon icon-rating-star">
                    <use xlink:href="#icon-rating-star" />
                </svg>
            </div>
            <h2>icon-rating-star</h2>
            <button onclick="showPopover('snippet-icon-rating-star')">Show Snippet</button>
            <br/>
            <button onclick="invertBackground('icon-box-icon-rating-star')">Invert Background</button>
            <div class="snippet-popover" id="snippet-icon-rating-star">
                <pre><code>&lt;svg class=&quot;icon icon-rating-star&quot;&gt;&lt;use xlink:href=&quot;#icon-rating-star&quot;&gt;&lt;/use&gt;&lt;/svg&gt;</code></pre>
                <button onclick="hidePopover()">Close</button>
            </div>
        </li>
        

        <li title="icon-search-bar">
            <div class="icon-box" id="icon-box-icon-search-bar">
                <svg class="icon icon-search-bar">
                    <use xlink:href="#icon-search-bar" />
                </svg>
            </div>
            <h2>icon-search-bar</h2>
            <button onclick="showPopover('snippet-icon-search-bar')">Show Snippet</button>
            <br/>
            <button onclick="invertBackground('icon-box-icon-search-bar')">Invert Background</button>
            <div class="snippet-popover" id="snippet-icon-search-bar">
                <pre><code>&lt;svg class=&quot;icon icon-search-bar&quot;&gt;&lt;use xlink:href=&quot;#icon-search-bar&quot;&gt;&lt;/use&gt;&lt;/svg&gt;</code></pre>
                <button onclick="hidePopover()">Close</button>
            </div>
        </li>
        

        <li title="icon-symbols">
            <div class="icon-box" id="icon-box-icon-symbols">
                <svg class="icon icon-symbols">
                    <use xlink:href="#icon-symbols" />
                </svg>
            </div>
            <h2>icon-symbols</h2>
            <button onclick="showPopover('snippet-icon-symbols')">Show Snippet</button>
            <br/>
            <button onclick="invertBackground('icon-box-icon-symbols')">Invert Background</button>
            <div class="snippet-popover" id="snippet-icon-symbols">
                <pre><code>&lt;svg class=&quot;icon icon-symbols&quot;&gt;&lt;use xlink:href=&quot;#icon-symbols&quot;&gt;&lt;/use&gt;&lt;/svg&gt;</code></pre>
                <button onclick="hidePopover()">Close</button>
            </div>
        </li>
        

        <li title="icon-tag-new-circle">
            <div class="icon-box" id="icon-box-icon-tag-new-circle">
                <svg class="icon icon-tag-new-circle">
                    <use xlink:href="#icon-tag-new-circle" />
                </svg>
            </div>
            <h2>icon-tag-new-circle</h2>
            <button onclick="showPopover('snippet-icon-tag-new-circle')">Show Snippet</button>
            <br/>
            <button onclick="invertBackground('icon-box-icon-tag-new-circle')">Invert Background</button>
            <div class="snippet-popover" id="snippet-icon-tag-new-circle">
                <pre><code>&lt;svg class=&quot;icon icon-tag-new-circle&quot;&gt;&lt;use xlink:href=&quot;#icon-tag-new-circle&quot;&gt;&lt;/use&gt;&lt;/svg&gt;</code></pre>
                <button onclick="hidePopover()">Close</button>
            </div>
        </li>
        

        <li title="icon-twitter">
            <div class="icon-box" id="icon-box-icon-twitter">
                <svg class="icon icon-twitter">
                    <use xlink:href="#icon-twitter" />
                </svg>
            </div>
            <h2>icon-twitter</h2>
            <button onclick="showPopover('snippet-icon-twitter')">Show Snippet</button>
            <br/>
            <button onclick="invertBackground('icon-box-icon-twitter')">Invert Background</button>
            <div class="snippet-popover" id="snippet-icon-twitter">
                <pre><code>&lt;svg class=&quot;icon icon-twitter&quot;&gt;&lt;use xlink:href=&quot;#icon-twitter&quot;&gt;&lt;/use&gt;&lt;/svg&gt;</code></pre>
                <button onclick="hidePopover()">Close</button>
            </div>
        </li>
        
    </ul>
</section>
<footer>
    <p>Generated by <a href="https://github.com/shakyshane/gulp-svg-sprites">Gulp Svg Sprites</a> - Preview page courtesy of <a href="http://iconizr.com" target="_blank">iconizr</a>.</p>
</footer>
<script type="text/javascript">
    var openSnippet;
    function showPopover(id) {
        openSnippet = document.getElementById(id);
        openSnippet.classList.add("active");
    }
    function hidePopover() {

        openSnippet.classList.remove("active");
    }
    function invertBackground(id) {
        var elem = document.getElementById(id);
        elem.classList.toggle("inverted");
    }
</script>
</body>
</html>
